<template>
  <div class="xiaobanxin geshou">
    <div class="geshou_l">
      <div class="dk">
        <h2>推荐</h2>
        <ul>
          <li class="active">推荐歌手</li>
          <li>入驻歌手</li>
        </ul>
      </div>
      <div class="dk">
        <h2>华语</h2>
        <ul>
          <li>华语男歌手</li>
          <li>华语女歌手</li>
          <li>华语组合/乐队</li>
        </ul>
      </div>
      <div class="dk">
        <h2>欧美</h2>
        <ul>
          <li>欧美男歌手</li>
          <li>欧美女歌手</li>
          <li>欧美组合/乐队</li>
        </ul>
      </div>
      <div class="dk">
        <h2>日本</h2>
        <ul>
          <li>日本男歌手</li>
          <li>日本女歌手</li>
          <li>日本组合/乐队</li>
        </ul>
      </div>
      <div class="dk">
        <h2>韩国</h2>
        <ul>
          <li>韩国男歌手</li>
          <li>韩国女歌手</li>
          <li>韩国组合/乐队</li>
        </ul>
      </div>
      <div class="dk">
        <h2>其他</h2>
        <ul>
          <li>其他男歌手</li>
          <li>其他女歌手</li>
          <li>其他组合/乐队</li>
        </ul>
      </div>
    </div>

    <div class="geshou_r">
      <div class="ruzhu">
        <div class="ruzhugeshou">
          <h2>入驻歌手</h2>
          <span>更多>></span>
        </div>
        <ul class="touxiang">
          <li>
            <img src="../../assets/images/ruzhu/01.jpg" alt="" />
            <div>
              <span>张惠妹</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/02.jpg" alt="" />
            <div>
              <span>吴莫愁</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/03.jpg" alt="" />
            <div>
              <span>孙楠</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/04.jpg" alt="" />
            <div>
              <span>老狼</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/05.jpg" alt="" />
            <div>
              <span>陈楚生</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/06.jpg" alt="" />
            <div>
              <span>陶喆</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/07.jpg" alt="" />
            <div>
              <span>蔡健雅</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/08.jpg" alt="" />
            <div>
              <span>黄小琥</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/09.jpg" alt="" />
            <div>
              <span>胡海泉</span>
            </div>
          </li>
          <li>
            <img src="../../assets/images/ruzhu/10.jpg" alt="" />
            <div>
              <span>杨宗纬</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="remen">
        <div class="remengehsou">
          <h2>热门歌手</h2>
        </div>
        <ul class="touxiang">
          <li v-for="(item, index) in remengeshou.slice(0, 10)" :key="index">
            <img :src="item.img1v1Url" alt="" />
            <div>
              <span>{{ item.name }}</span>
            </div>
          </li>
        </ul>
        <ul class="renming">
          <li v-for="(item, index) in remengeshou.slice(10, 100)" :key="index">
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { GetrmengeshouApi } from "../../request/api";
export default {
  data() {
    return {
      //热门歌手
      remengeshou: [],
    };
  },
  created() {
    GetrmengeshouApi({ limit: "101" }).then((res) => {
      this.remengeshou = res.data.artists;
      console.log(this.remengeshou);
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.geshou {
  display: flex;
  box-sizing: border-box;
  .geshou_l {
    padding-top: 30px;
    width: 22%;
    box-sizing: border-box;
    background-color: rgb(250, 247, 247);
    .dk {
      width: 80%;
      margin: auto;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      &:last-of-type {
        border-bottom: none;
      }
      h2 {
        padding-left: 10px;
      }
      ul {
        li {
          padding-left: 30px;
          box-sizing: border-box;
          width: 93%;
          height: 27px;
          line-height: 30px;
          background: url(../../assets/images/singer.png) 0 -31px;
          background-size: cover;
          color: #999;
          &.active {
            background: url(../../assets/images/singer.png);
            color: red;
          }
          &:hover {
            background: url(../../assets/images/singer.png);
            color: red;
          }
        }
      }
    }
  }
  .geshou_r {
    padding-top: 30px;
    width: 78%;
    background-color: rgb(116, 209, 245);
    .ruzhu {
      .ruzhugeshou {
        display: flex;
        justify-content: space-between;
        border-bottom: 3px solid red;
      }
      .touxiang {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        li {
          margin: 10px;
          img {
            width: 128px;
            margin-bottom: 5px;
          }
        }
      }
    }
    .remen {
      .remengehsou {
        border-bottom: 3px solid red;
      }
      .touxiang {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        border-bottom: 1px solid #ccc;
        li {
          margin: 10px;
          img {
            width: 128px;
            margin-bottom: 5px;
          }
        }
      }
      .renming {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        li {
          width: 128px;
          margin: 10px;
        }
      }
    }
  }
}
</style>